<template>
  <!--线上课程-->
  <div>
    <carousel :autoplaySpeed="autoplaySpeed" :Img="Img"></carousel>
    <div class="wrapper">
      <Row :gutter="16">
        <i-col span="6">
          <ngn :data="data1" :activeIndex="activeIndex"></ngn>
        </i-col>
        <i-col span="18">
          <div class="com">
            <p class="p">
              <Icon type="ios-pin"/>
              <span>您现在的位置是:</span><span class="span">{{data1.title}}</span><span> > </span><span
              class="span">线上课程</span>
            </p>
            <div style="padding: 20px 0">
              <Row :gutter="16" style="padding-bottom: 10px">
                <i-col span="12" v-for="lists in list">
                  <lesson :Data="lists"></lesson>
                </i-col>
              </Row>

            </div>
            <!--Vue组件-->
            <div class="page">
              <paging :all="all" @returnValue="returnValue"></paging>
            </div>
          </div>
        </i-col>
      </Row>
    </div>
  </div>
</template>

<script>
  import carousel from '../module/carousel'
  import ngn from '../module/ngn'
  import lesson from '../module/lesson'
  import paging from '../module/paging'

  export default {
    components: {
      carousel, ngn, lesson, paging
    },
    data() {
      return {
        activeIndex: 3,
        autoplaySpeed: 100000,
        onlineCoursesLink: this.$api.url + '/online/classes/list/all/',
        all: 1,
        cur: 1,
        Img: [
          {
            id: 1,
            imageLocation: require('../../assets/img/u69.jpg'),
            state: true,
            uri: "",
          },
        ],
        data1: {
          title: '论文投稿',
          list: [
            {list: '投稿流程', link: 'contributeProcess'},
            {list: '投稿指南', link: 'contributeGuide'},
            {list: '投稿评估', link: 'manuscriptEvaluation'},
            {list: '线上课程', link: 'onlineCourses'},

            {list: '文献格式校验', link: 'DocumentFormatCheck',},
            {list: '错别字校对', link: 'ProofreadForTypos',},
            {list: '稿件创新指数', link: 'ManuscriptInnovationIndex',},
          ],
        },
        list: [
          /*          {
                      id: 1,
                      intro: "利用分子生物学方法,研究7株11群肺炎链球菌荚膜多糖合成相关基因(cps loci)",
                      lastModifyTime: 1539072254000,
                      lastTimeFormate: "2018-10-09",
                      photoUri: "http://tlpt.yutaolife007.com/statics/periodicals_img/u1029.png",
                      playTime: "1小时15分钟22秒",
                      speaker: "陈琼",
                      title: "11群肺炎链球菌荚膜多糖合成相关基因的分子生物学研究",
                      uri: "wwww.baidu",
                    },
                    {
                      id: 2,
                      intro: "利用分子生物学方法,研究7株11群肺炎链球菌荚膜多糖合成相关基因(cps loci)",
                      lastModifyTime: 1538640257000,
                      lastTimeFormate: "2018-10-04",
                      photoUri: "http://tlpt.yutaolife007.com/statics/periodicals_img/u1028.png",
                      playTime: "35分钟22秒",
                      speaker: "陈琼",
                      title: "廿载芳华全科梦，岁月峥嵘新征程 ——纪念《中国医学》创刊20周年",
                      uri: "wwww.baidu",
                    },*/
        ],
      }
    },
    mounted() {
      this.dataArray()
    },
    methods: {
      returnValue(data) {
        this.cur = data;
        this.dataArray()
      },
      dataArray() {
        this.$axios.get(this.onlineCoursesLink + this.cur).then((res) => {
          this.all = res.data.data.totalPage;
          this.list = res.data.data.lists
        });
      },
    },
  }
</script>

<style scoped>
  .com {
    padding-bottom: 20px;
  }

  .com .p {
    padding: 10px 0;
    font-size: 16px;
    font-weight: bold;
    border-bottom: 1px solid #000;
  }

  .span {
    padding: 0 10px;
  }
</style>
